<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* ul li:last-child {
        color: red;
      } */

      ul li:nth-child(even) {
        color: red;
      }
    </style>
  </head>
  <body>
    <!-- 
    1. 新增了选择器
    ● :last-child 匹配父元素的最后一个子元素
    ● :nth-child(n) 匹配父元素的第 n 个子元素
    2. 边框特性
    ● border-radius 圆角
    3. 颜色与不透明度
    ● opacity: 0.5;
    ● color: rgba(0, 0, 0, 0.5)
    4. 阴影
    ● text-shadow 文字阴影
    ● box-shadow 盒子阴影
    5. transform 变形
    ● transform: rotate(9deg) 旋转
    ● transform: scale(0.5) 缩放
    ● transform: translate(100px, 100px) 位移
    6. 过渡与动画
    ● transition 过渡
    ● animation 动画
      Vue中transition组件，用来给显示隐藏切换的元素一个动画/过渡效果
      https://gitee.com/xxpromise/class220829/blob/master/03.vue3-vite/src-16-vue-router/App.vue
    7. 媒体查询
    ● @media 用来做响应式布局
   -->
    <ul>
      <li>111</li>
      <li>222</li>
      <li>333</li>
      <li>444</li>
    </ul>
  </body>
</html>
